<template>
  <div>
    <div>
      <v-snackbar v-model="isSuccess" :timeout="3000" top style="color: #68c23c;" color="#f0f9eb">
        {{ text }}
      </v-snackbar>
      <v-snackbar v-model="isError" :timeout="3000" top class="custom-alert-error" color="#fef0f0">
        {{ text }}
      </v-snackbar>
    </div>
    <v-dialog v-model="dialog" persistent transition="fab-transition" max-width="800" id="settings">
      <v-card tile>
        <div class="d-flex justify-space-between mb-5" id="modal-header">
          <v-card-title class="py-3">直播信息</v-card-title>

          <v-btn icon text @click="closeModal">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </div>

        <v-card-text>
          <v-row>
            <v-col order="last" order-sm="last" order-md="first" order-lg="first" order-xl="first" cols="12" sm="12"
              md="8" lg="8" class="pt-0">
              <h3 class="mb-6 mt-0 pt-0"></h3>
              <ValidationObserver ref="personalInfoForm" v-slot="{ handleSubmit, reset }">
                <form @submit.prevent="handleSubmit(submit)" @reset.prevent="reset">
                  <ValidationProvider v-slot="{ errors }" name="推流码" rules="required">
                    <v-text-field v-model="formData.pushStreamCode" :error-messages="errors" label="推流码" filled
                      dense></v-text-field>
                  </ValidationProvider>
                  <ValidationProvider v-slot="{ errors }" name="直播介绍" rules="required">
                    <v-text-field v-model="formData.preview" :error-messages="errors" label="直播介绍" filled
                      dense></v-text-field>
                  </ValidationProvider>
                  <ValidationProvider v-slot="{ errors }" name="标签" rules="required">
                    <v-select :items="tags" :error-messages="errors" filled label="标签"
                      v-model="formData.tag"></v-select>
                  </ValidationProvider>
                  <v-btn :loading="loading" type="submit" class="primary " depressed>提交</v-btn>
                </form>
              </ValidationObserver>

            </v-col>
            <v-col order-sm="1" cols="12" sm="12" md="4" lg="4" class="text-center">
            <v-btn text @click="toggleShow">修改封面</v-btn>
            <div v-if="show">
              <v-file-input v-model="selectedCover" label="选择文件" placeholder="没有选择文件" accept="image/png,image/jpeg"></v-file-input>
              <v-btn @click="uploadCover">上传</v-btn>
              <p v-if="uploadProgress !== null">上传进度: {{ uploadProgress }}%</p>
              <p v-if="successMessage">{{ successMessage }}</p>
            </div>
            <v-responsive width="330" class="mx-auto">
              <div v-if="!imgDataUrl" class="px-12" id="image-placeholder">
                <v-icon>mdi-image-plus</v-icon>
              </div>
              <v-img v-else max-width="330" height="350" :src="imgDataUrl"></v-img>
            </v-responsive>
          </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>

</template>

<script>
import { startLive } from '../services/LiveRequest';
import axios from 'axios';
//import myUpload from 'vue-image-crop-upload'
export default {
  name: 'LiveModal',
  props: ['openDialog'],
  data: function () {
    return {
      selectedCover:null,
      uploadProgress:null,
      imgDataUrl:null,
      text: '',
      isSuccess: false,
      isError: false,
      successMessage: null,
      valid: false,
      interval: {},
      value: 0,
      show: false,
      tags: ['游戏', '户外', '教育'],
      loading:false,
      formData: {
        preview:'',
        pushStreamCode:'',
        tag:'',
        cover:''
      }
    }
  },
  computed: {
    dialog() {
      return this.openDialog
    }
  },
  methods: {
    uploadCover() {
      const formData = new FormData();
      formData.append("cover", this.selectedCover);
      axios.post("/api/echo/live/cover", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          "Authorization": localStorage.getItem("Authorization")
        },
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          );
        }
      })
        .then((res) => {
          this.successMessage = "头像上传成功!";
          this.selectedFile = null;
          this.uploadProgress = null;
          console.log(res)
          this.imgDataUrl = res.data
          this.show = false
          this.formData.cover = this.imgDataUrl
        })
        .catch(() => {
          this.successMessage = "封面失败!";
          this.uploadProgress = null;
        })
    },
    async submit() {
      if (this.loading) return
      this.loading = true
      this.formData.cover = this.imgDataUrl
      startLive(this.formData)
      .then((res=>{
        if(res.data.data.code==200){
          console.log('success')
        }
      }))
      .finally(()=>{
        this.loading = false
      })
    },
    closeModal() {
      this.$emit('closeDialog')
    },

    toggleShow() {
      this.show = !this.show
    }
  },
  components: {

  }
}
</script>

<style lang="scss">
.custom-alert {
  color: #68c23c;
  /* 深绿色文字 */
}

.custom-alert-error {
  color: #f56c6c;
}

#modal-header {
  border-bottom: 1px solid rgb(238, 232, 232);
}

#settings-image-placeholder {
  padding-top: 7em;
  padding-bottom: 7em;
  border: 2px dashed rgb(209, 209, 209);
  border-radius: 50%;
}

@media (max-width: 700px) {
  .vue-image-crop-upload {
    .vicp-wrap {
      width: 95%;
      height: 550px;

      .vicp-step2 .vicp-crop {
        .vicp-crop-left {
          float: none;

          .vicp-range {
            margin: auto;
            margin-top: 30px;
          }

          & * {
            margin-left: auto;
            margin-right: auto;
          }
        }

        .vicp-crop-right {
          float: none;
          margin-top: 30px;

          .vicp-preview .vicp-preview-item {
            display: inline-block;
            float: none;
          }

          & * {
            // margin-left: auto;
            // margin-right: auto;
          }
        }
      }
    }
  }
}
</style>